<!-- 删除放置目标 -->
<template>
  <div>
    <a-modal 
      v-model="modalVisible" 
      @ok="handleDelete"
      @cancel="handleCancel"
      :maskClosable="false"
      :width="400"
      v-dragModal
    >
      <template slot="title">
        <!-- <i class="icon icon-error16f tip-icon"></i> -->
        <Iconfont class="icon tip-icon" type="icon-error16f"></Iconfont>
        <span>{{$t('Delete')+$t('存储区域')}}</span>
      </template>

      <div>
        <span v-if="$store.state.language=='zh'">
          删除存储区域 "{{this.currentPlacementTarget.name}}" 后，将无法恢复！您确定要删除吗？
        </span>
        <span v-else>
          After deleting Storage Area "{{this.currentPlacementTarget.name}}", it cannot be recovered! Are you sure you want to delete?
        </span>
      </div>

      <template slot="footer">
        <a-button @click="handleCancel" class="submit-btn">
          {{$t('Cancel')}}
        </a-button>
        <a-button class="error-btn submit-btn" @click="handleDelete" :loading="submitLoading">
          {{$t('Delete')}}
        </a-button>
      </template>
    </a-modal>
  </div>
</template>

<script>
export default {
  name: "DelPlacementTarget",
  props: {
    visible: {
      type: Boolean,
      required: true
    },
    targetArea: {
      type: Object,
      required: true,
      default: () => { return {} }
    },
    currentPlacementTarget: {
      type: Object
    },
  },

  watch: {
    visible(newValue) {
      this.modalVisible = newValue;
    }
  },

  data() {
    return {
      modalVisible: false,
      submitLoading: false,
    }
  },

  methods: {
    //删除放置目标
    async handleDelete() {
      this.submitLoading = true;
      const params = {
        zonegroup_name: this.targetArea.zonegroup_name,
        id: this.currentPlacementTarget.id
      }
      const res = await this.$api.areaManage.delAreaGroupAreaRequest(params);
      if(res && res.data) {
        this.model(res.data.id) //返回模板
        this.notice(res.data.id, res.data.params, res.data.flag) //通知列表显示
        if(res.data.flag !== 1) {
          this.$emit('updateGroupStoreArea');
        }
      }
      this.handleCancel();
      this.submitLoading = false;
    },

    //关闭弹窗
    handleCancel() {
      this.$emit('closeOperateModal', 'del-placement-target');
    },
  },
}
</script>
<style scoped>
  .tip-icon {
    color: var(--mainRedColor);
    margin-right: 8px;
  }
  .error-btn {
    background-color: var(--mainRedColor);
    border-color: var(--mainRedColor);
    color: #fff;
  }
  .submit-btn {
    width: 70px;
  }
  ::v-deep.ant-modal-header {
    border-bottom: none;
  }
  ::v-deep.ant-modal-footer {
    border-top: none;
  }
  ::v-deep.ant-modal-body {
    padding: 12px 24px;
  }
</style>